<template>
	<view class="box" :style="theme">
		<view class="tabs">
			<u-tabs :list="tabList" lineHeight="1" :scrollable="false"
				:activeStyle="{ fontWeight: 'bolder', fontSize: '28rpx', color: '#222222' }"
				:inactiveStyle="{ fontSize: '28rpx' }" @click="tabclick" :current="active"></u-tabs>
		</view>
		<view class="ul">
			<view v-for="item in list" :key="item.id" @click="jump('/pages/aboutBall/detail?id=',item.joinId)" class="li">
				<view class="top flex flex_between">
					<image :src="item.projectPic" class="left"></image>
					<view class="right">
						<view class="name flex flex_between">
							<text
								class="f30 c1 fwb limit-1-line">{{ item.name }}</text>
							<text :class="tabList[active].key== 0 || tabList[active].key== 1?'on':'wu'">
								{{tabList[active].key==0?'未开始':tabList[active].key==1?'进行中':tabList[active].key==2?'已取消':'已结束'}}
							</text>
						</view>
						<view class="address">
							{{item.venueName}}
						</view>
					</view>
				</view>
				<view class="f24 mt20">
					<text class="c6">活动时间：</text>
					<text class="c3">{{item.acTime }}</text>
				</view>
				<view class="f24 mt20">
					<text class="c6">活动人数：</text>
					<text v-if="item.numType ==1" class="c3">{{item.numMin || 0}}-{{item.numMax }}人</text>
					<text v-else class="c3">不限人数</text>
				</view>
			</view>
		</view>
		<u-loadmore v-if="end && list.length >= 10" :status="status" line />
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无数据～</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
						key: '0',
						name: '未开始'
					},
					{
						key: '1',
						name: '进行中'
					}, {
						key: '2',
						name: '已取消'
					}, {
						key: '3',
						name: '已结束'
					}
				],
				active: 0,
				list: [],
				page: 1,
				end: false,
				firstQueryTime: '',
				status: 'nomore',
			};
		},
		onLoad(options) {
			this.active = options.active || 0
			this.firstQueryTime = this.$app.firstQueryTime()
			this.list = [];
			this.page = 1;
			this.end = false;
			this.getList()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			tabclick(e) {
				this.active = e.index;
				this.firstQueryTime = this.$app.firstQueryTime()
				this.list = [];
				this.page = 1;
				this.end = false;
				this.getList()
			},
			// 列表
			getList() {
				this.$app.ajax({
					data: {
						pagination: {
							firstQueryTime: this.firstQueryTime,
							page: this.page,
							rows: 10
						},
						param: {
							state : this.tabList[this.active].key
						}
					},
					api: this.$api.appMineJointOrderList()
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < 10) {
							this.end = true
						}
						if (res.recordList) {
							this.list = this.list.concat(res.recordList)
						}
					}
				}).catch(() => {})
			},
			reachBottom() {
				if (!this.end) {
					this.page += 1;
					this.getList();
				}
			},
			// 触底加载更多数据
			onReachBottom(e) {
				this.reachBottom()
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tabs {
		background: #fff;
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.ul {
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		.li {
			box-sizing: border-box;
			padding: 30rpx 30rpx;
			background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%);
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			.top {
				.left {
					width: 104rpx;
					height: 104rpx;
					border-radius: 8rpx;
					border: 1rpx solid #F3F3F3;
					margin-right: 24rpx;
					flex: none;
				}
				.right {
					flex: 1;
					.name {
						margin-bottom: 14rpx;
						.wu {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							margin-left: 10rpx;
							flex: none;
							width: 3em;
						}
						.on {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: $color2;
							margin-left: 10rpx;
							flex: none;
							width: 3em;
						}
					}
				}
				
			}
		}
	}
</style>